<template>
<!--<div>资产管理</div>-->
  <div>
    <Card shadow>
      <div class="search-con search-con-top">
        <Select v-model="searchKey" class="search-col">
          <Option v-for="item in columns" v-if="item.key !== 'handle' &&item.search!==false" :value="item.key"
                  :key="`search-col-${item.key}`">{{ item.title }}
          </Option>
        </Select>
        <Input clearable placeholder="输入关键字搜索" class="search-input"/>
        <Button class="search-btn" type="primary">
          <Icon type="search"/>&nbsp;&nbsp;搜索
        </Button>
      </div>
      <Table ref="dataTable" highlight-row :columns="columns"
             resizeable=true :data="data" :loading="loading"
             row-key="id" select
             border height="400"
      ></Table>
      <div style="text-align: right;margin-top: 10px">
        <Page :total="dataSize"
              :page-size="pageSize"
              :current="pageIndex"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-total
              show-elevator
              show-sizer/>
      </div>
    </Card>
  </div>
</template>

<script>
import {getAllOrderFormByPageAndSizeAndStatus} from "@/api/data";
import {getStatus} from "@/libs/tools"
export default {
  name: "list",
  data() {
    return {
      searchKey: '',
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0,
      data: [],
      getStatus:getStatus,
      columns: [{
        type: 'selection',
        width: 60,
        search:false,
        align: 'center'
      },
        {
          title: '订单号',
          key: 'orderNumber',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '订单房间',
          key: 'roomList',
          render: (h, params) => {
            let row = params.row;
            let arr = [];
            for (const arrElement of row.roomList) {
              arr.push(h('ListItem',arrElement.roomCode));
            }
            return h('List',arr)
          }
        },
        {
          title: '开始时间',
          key: 'startTime',
          // minWidth: '150px',
          // width: 150,
        },
        {
          title: '结束时间',
          key: 'endTime',
          // minWidth: '150px',
          // width: 150,
        },
        {
          title: '总费用',
          key: 'totalMoney',
          // minWidth: '150px',
          // width: 150,
        },
        {
          title: '折后费用',
          key: 'discountedMoney',
          // minWidth: '150px',
          // width: 150,
        },

        {
          title: '创建时间',
          key: 'createTime',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '修改时间',
          key: 'updateTime',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '状态',
          key: 'status',
          tooltip: true,
          resizable: true,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          }
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '操作',
          key: 'handle',
          minWidth: 200,
          maxWidth: 300,
          resizable: true,
          width: 220,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateUser(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: params.row.status.toUpperCase()==='DELETE'?'warning':'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteUser(params)
                  }
                }
              },  params.row.status.toUpperCase()==='DELETE'?'恢复':'删除')
            ]);
          }
        },
      ]
    }
  },
  methods: {
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    getData() {
      this.loading = true
      getAllOrderFormByPageAndSizeAndStatus(this.pageIndex, this.pageSize,"Finnish").then(data => {
        if (data.data.code !== 200 || !data.data.object.content) {
          this.$Message.error(data.data.message);
        } else {
          this.data = data.data.object.content;
          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>
